<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>报关单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>
      
      <el-descriptions :column="3" border>
        <el-descriptions-item label="报关单号">{{ declaration.declarationNo }}</el-descriptions-item>
        <el-descriptions-item label="报关类型">
          <dict-tag :options="dict.type.fiscale_declaration_type" :value="declaration.declarationType"/>
        </el-descriptions-item>
        <el-descriptions-item label="贸易方式">
          <dict-tag :options="dict.type.fiscale_trade_mode" :value="declaration.tradeMode"/>
        </el-descriptions-item>
        <el-descriptions-item label="运输方式">
          <dict-tag :options="dict.type.fiscale_transport_mode" :value="declaration.transportMode"/>
        </el-descriptions-item>
        <el-descriptions-item label="启运港">{{ declaration.departurePort }}</el-descriptions-item>
        <el-descriptions-item label="目的港">{{ declaration.destinationPort }}</el-descriptions-item>
        <el-descriptions-item label="出口日期">{{ parseTime(declaration.exportDate, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="总金额">{{ declaration.totalAmount }} {{ declaration.currency }}</el-descriptions-item>
        <el-descriptions-item label="总重量">{{ declaration.totalWeight }} KG</el-descriptions-item>
        <el-descriptions-item label="总件数">{{ declaration.totalPackages }}</el-descriptions-item>
        <el-descriptions-item label="报关状态">
          <dict-tag :options="dict.type.fiscale_customs_status" :value="declaration.customsStatus"/>
        </el-descriptions-item>
        <el-descriptions-item label="提交日期">{{ parseTime(declaration.submitDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="报关员">{{ declaration.customsOfficer }}</el-descriptions-item>
        <el-descriptions-item label="海关编码">{{ declaration.customsCode }}</el-descriptions-item>
        <el-descriptions-item label="创建者">{{ declaration.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(declaration.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="3">{{ declaration.remark }}</el-descriptions-item>
      </el-descriptions>

      <!-- 关联订单信息 -->
      <div style="margin-top: 20px;">
        <h3>关联订单</h3>
        <el-table :data="declaration.declarationOrderList" border>
          <el-table-column label="订单号" prop="orderNo" />
          <el-table-column label="订单金额" prop="orderAmount" />
          <el-table-column label="订单重量(KG)" prop="orderWeight" />
          <el-table-column label="订单件数" prop="orderPackages" />
        </el-table>
      </div>

      <!-- 商品明细信息 -->
      <div style="margin-top: 20px;">
        <h3>商品明细</h3>
        <el-table :data="declaration.declarationItemList" border>
          <el-table-column label="商品名称" prop="productName" />
          <el-table-column label="英文名称" prop="productNameEn" />
          <el-table-column label="HS编码" prop="hsCode" />
          <el-table-column label="规格型号" prop="specification" />
          <el-table-column label="数量" prop="quantity" />
          <el-table-column label="单位" prop="unit" />
          <el-table-column label="单价" prop="unitPrice" />
          <el-table-column label="总价" prop="totalPrice" />
          <el-table-column label="重量(KG)" prop="weight" />
          <el-table-column label="原产国" prop="countryOfOrigin" />
          <el-table-column label="品牌" prop="brand" />
          <el-table-column label="型号" prop="model" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDeclaration } from "@/api/fiscale/declaration";

export default {
  name: "DeclarationDetail",
  dicts: ['fiscale_declaration_type', 'fiscale_trade_mode', 'fiscale_transport_mode', 'fiscale_customs_status'],
  data() {
    return {
      declaration: {
        declarationOrderList: [],
        declarationItemList: []
      }
    };
  },
  created() {
    this.getDeclarationDetail();
  },
  methods: {
    getDeclarationDetail() {
      const declarationId = this.$route.query.declarationId;
      if (declarationId) {
        getDeclaration(declarationId).then(response => {
          this.declaration = response.data;
        });
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>